Reacti kohandatud konksude sõltuvused: efekti optimeerimise valdamine jõudluse parandamiseks

            
import React, { useState, useEffect } from 'react';

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Dependency array: only re-run when userId changes

  if (!userData) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.email}</p>
    </div>
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Potential issue: `count` is not a dependency
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Empty dependency array: effect runs only once

  return <p>Count: {count}</p>;
}

export default Counter;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Correct: use functional update
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Now no dependency is needed since we use the functional update form.

  return <p>Count: {count}</p>;
}

export default Counter;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Problem: `data` is an object, so it changes on every render

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useMemo } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Memoize the `data` object
  const data = useMemo(() => ({ value }), [value]);

  return <DisplayData data={data} />;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Now `data` only changes when `value` changes

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  return <DisplayData value={value} />; // Pass `value` directly
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Only re-run when `value` changes

  function processData(value) {
    // Complex data processing logic
    return { value }; // Wrap in object if needed inside DisplayData
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Requires lodash library (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Perform some complex data processing
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` is still in the dependency array, but we check for deep equality

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Updates `data` state
      });
  }, [data]); // Problem: `data` is a dependency, so the effect re-runs when `data` changes

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Empty dependency array: effect runs only once

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Fetch data from an API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Only re-run when `isLoading` changes

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!data) {
      // Fetch data from an API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` is still a dependency but the effect is conditional

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Problem: Changes to `config.theme` or `config.language` won't trigger the effect

  const toggleTheme = () => {
    // Mutating the object
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // This won't trigger a re-render or the effect
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Now the effect will trigger when `config` changes

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Create a new object
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useCallback } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Memoize `fetchData` based on `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Now `fetchData` only changes when `url` changes

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    <div>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect, useRef } from 'react';

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Update the ref on every render
  }, [value]); // Update the ref when `value` changes

  useEffect(() => {
    // Log the latest value after 5 seconds
    const timerId = setTimeout(() => {
      console.log('Latest value:', latestValue.current); // Access the latest value from the ref
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // Effect runs only once on mount

  return <p>Value: {value}</p>;
}

export default LogLatestValue;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

// Custom comparator to only track theme changes.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        <p>The current theme is {theme}</p>
    )
}

export default ConfigComponent;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Requires date-fns library (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Re-run when `date` or `locale` changes

  return <p>{formattedDate}</p>;
}

export default LocalizedDate;

            

              
                Copy
              
            
          

            
import React, { useState, useEffect } from 'react';

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Re-run when `amount`, `currency`, or `locale` changes

  return <p>{formattedCurrency}</p>;
}

export default LocalizedCurrency;

            

              
                Copy